<template>
    <div class="home-swipe">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        input-align="center"
        @focus="onFocus"
        @search="onSearch"
      />
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in bannerData" :key="index">
          <van-image :src="item.imageUrl" lazy-load radius="20px" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </template>
  
  <script>
  import { Toast } from "vant";
  export default {
    data() {
      return {
        value: "",
        bannerData: [],
      };
    },
    created() {
      this.getBanner();
    },
    methods: {
      getBanner() {
        this.$request("get", "/banner").then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.bannerData = res.banners;
          }
        });
      },
      onFocus() {
        // Toast("触发获得焦点事件");
      },
      onSearch(val) {
        Toast(val);
      },
    },
  };
  </script>
  
  <style scoped>
  /* .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  } */
  /* .my-swipe .van-swipe-item {
    width: 80%;
    margin: 0 auto;
    background-color: black;
  }
  .my-swipe .van-swipe-item .van-image {
    width: 730px;
    height: 284px;
  } */
  </style>